<template>
    <div class="acceptance-registration-pages">
        <commpVxeTable
         :config="dataTableConfig" 
         :columns="columnsVxe" 
         :formItem="formItem"
         @checkboxChange="checkboxChange"
         :conditionBtnRow="true"
         ref="acceptanceRegistrationRef"
         >
            <template v-slot:externalOperations="{data}">
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="addClick({},false)">新增</a-button>
                    </template>
                </vxe-form-item>
            </template>
            <template v-slot:fqjkssj_slotName="{data}">
                <a-date-picker format='YYYY-MM-DD' v-model:value="fqjkssj" 
                @change="($event)=>{ fqjkssj = $event;dataTableConfig.paramet={...dataTableConfig.paramet,fqjkssj:moment(fqjkssj).format('YYYY-MM-DD')}}" />
            </template>
            <template v-slot:fqjjssj_slotName="{data}">
                <a-date-picker format='YYYY-MM-DD' v-model:value="fqjjssj" 
                @change="($event)=>{ fqjjssj = $event;dataTableConfig.paramet={...dataTableConfig.paramet,fqjjssj:moment(fqjjssj).format('YYYY-MM-DD')}}" />
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline" class="search-form" >
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="cancellationClick(row)">取消</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <increase ref="increaseRef" @successReturn="successReturn" />
    </div>
</template>
<script>
import {typeInput, typeNumber, typeSelect, typeCheckbox, typeRadio} from '@/components/compSearchCriteria/ContractType'
import assessCheckApi from './service/api.js'
import increase from './increase.vue'
import { jcyglcancelQj } from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import moment from 'moment'
import blobType from '@/common/blobType'
  export default {
    components:{
        increase,
        commpVxeTable
    },
    
    data(){
        return{
            moment:moment,
            addEditParameter:{},
            addEdittechnicalReview:{},
            fqjkssj:'',
            fqjjssj:'',
            formItem:[
            {
                label: '开始日期',
                model: 'fqjkssj',
                slotName:'fqjkssj_slotName',
            },{
                label: '结束日期',
                model: 'fqjjssj',
                slotName:'fqjjssj_slotName',
            }],
            columnsVxe:[{ 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '审评员姓名', //列头显示文字
                field: 'fxm',
            },{
                title: '请假开始时间',
                field: 'fqjkssj',
            },{
                title: '请假结束时间',
                field: 'fqjjssj',
            },{
                title: '请假事由',
                field: 'fqjsy',
            },{
                title: '状态',
                field: 'fstate',
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                fixed: 'right',
                width:100,
            }],
            dataTableConfig:{
                api: assessCheckApi.list,
                rowId: 'id',
                fywflcode:blobType.fywflcodeArr[blobType.menuType.indexOf(this.$route.name.substring(this.$route.name.indexOf('__'),this.$route.name.indexOf('_a')+2))],
                paramet:{
                }
            },
            specifyDateVal:'',
            isSpecifyDate:false,
            currentReplicationId:'',
            selectedRowKeysArr:[],
        }
    },
    mounted(){
    },
    
    methods:{
        checkboxChange(val){//获取当前选择的行
            //console.log('当前选择表格',val)
            this.selectedRowKeysArr = []
            val.forEach(item => {
                this.selectedRowKeysArr.push(item.jobids)
            });
        },
        addClick(row,val){
            this.$refs.increaseRef.visible = true
            this.$refs.increaseRef.getData(row,val)
        },
        successReturn(){
            this.$refs.acceptanceRegistrationRef.searchEvent()
        },
        cancellationClick(val){//
            var that = this
            this.$confirm({
                title:'您确认要取消吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    jcyglcancelQj({id:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$refs.acceptanceRegistrationRef.searchEvent()
                            that.$message.success(res.message)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
            
            
        },
    },

  }
</script>
<style lang="less">
.acceptance-registration-pages{
    .select-date-box{
        display: flex;
        flex-direction: column;
        span{
            color: #f5222d;
            font-size: 14px;
        }
    }
    .modal-btn-box{
        .ant-form-item-control{
            width: 175px !important;
        }
    }
    
}
</style>
<style scoped >
.observer-lbrary-pages{
    background: #fff;
}
.btn-box{
    display: flex;
    justify-content: flex-end;
}
.blue-btn{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
}
.red-btn{
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
}




</style>